<script setup>
import '@wangeditor-next/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor-next/editor-for-vue'
import { useUserInfoStore } from '@/store/userInfo';
import { useTokenStore } from '@/store/token';
import { getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance()
const userInfoStore = useUserInfoStore()
const tokenStore = useTokenStore()

const props = defineProps({
  // mode: {
  //   type: String,
  //   default: "default",
  // },
  height: {
    type: Number,
    default: 500,
  }
})

const mode = ref("default")
const editorRef = shallowRef()

// 创建实例
const handleCreated = (editor) => {
  editorRef.value = editor // 记录editor实例
}

// 工具栏配置
const toolbarConfig = {
  excludeKeys: [
    "uploadVideo", // 排除菜单组，写菜单组的key值即可
  ]
}

// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  excludeKeys: ["uploadVideo"],
  MENU_CONF: {
    maxFileSize: 3 * 1024 * 1024, // 3 MB
    fieldName: 'file',
    server: '/api/user/file/uploadFile',
    allowedFileTypes: ['image/*'], // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
    meta: { // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
      token: 'xxx',
    },
    headers: { // 自定义增加 http  header
      Token: tokenStore.token,
    },
    customInsert(responseData, insertFn) {
      console.log("富文本编辑器上传图片的结果", responseData)
      if (responseData.code == 200) { // 正常请求
        // 插入图片
        insertFn(responseData.data.data, "", "")
        return
      } else {
        // 这里有可能是登录超时，也有可能是图片上传失败
        proxy.Notification.error(responseData.msg || "图片上传失败")
        // 这里可以添加逻辑：清空pinia中存储的用户信息和token
        return
      }
    }
  }
}

const emit = defineEmits([])

// 文本内容
const onChange = (editor) => {
  // 调用父级方法
  console.log("富文本内容", editor.getHtml())
}

// 组件销毁时，也销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})


</script>

<template>
  <div class="editor-html">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor :style="{ height: height + 'px', 'overflow-y': 'hidden' }" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="handleCreated" @onChange="onChange" />
  </div>
</template>

<style scoped>
.editor-html {
  border: 1px solid #ddd;
}
</style>